CSS 文本及格式

2022-04-21
css

<style>
	b {
		color: #008080;
	}
</style>
<body>
	<b>Hello,world!</b>
</body>

1.2 对齐方式

<style>
/*设置字体*/
p {
	font-family: "黑体";
	}
	
/*标题*/
h1 {
	text-align: center;
	}
	
/*副白标题*/
h4 {
	text-decoration: overline;
	text-align: center;
	}

/*删除字*/
h6 {
	text-decoration: line-through;
	}
	
/*下划线*/
b {
	text-decoration : underline;
	}

/*右侧*/
p.right {
	text-align: right;
	}
	
/*整齐*/
p.neat {
	text-align: justify;
	/*缩进*/
	text-indent: 20px;
	}
</style>
<body>
	<h1>Hello,world!</h1>
	<h4>1972年</h4>
	<p class="right">《C语言程序设计》</p>
	<p class="neat">作为所有编程语言的起始阶段，HELLO WORLD占据着无可比拟的地位。在所有中/英/法/德/美……版本的编程教材中，HELLO WORLD总是作为第一个TEST记录于书本之中，所有编程者学习编程的第一步就在于此了！经典中的经典！HELLO WORLD！这个例程是从Kernighan & Ritchie 合著的《The C Programme Language》开始有的，因为它的简洁，实用，并包含了一个程序所应具有的一切，因此为后来的些类书的作者提供了范例，一直待续到今。</p>
	<b>涉嫌引战删除</b>
	<h6>C语言是世界上最好的语言</h6>
</body>

1.3 大小写格式

<style>
	/*全部大写*/
	p.capital {
		text-transform: uppercase;
	}
	/*全部小写*/ 
	p.initialcapital {
		text-transform: lowercase;
	}
	/*首字母大写*/
	p.lowercase {
		text-transform: capitalize;
	}
</style>
<body>
	<p class="capital">hello,world!</p>
	<p class="initialcapital">hello,world!</p>
	<p class="lowercase">Hello,world!</p>
</body>

1.4 文本格式

<style>
p.italic {
	font-style: italic;
	}
</style>
<body>
	<p class="italic">Hello,world!</p>
</body>

1.5 文字大小

1.5.1 px

<style>
h1 {
	font-size:10px;
	}
</style>
<body>
	<h1>Hello,world!</h1>
</body>

1.5.2 em

<style>
h1 {
	font-size:0.625em;
	}
</style>
<body>
	<h1>Hello,world!</h1>
</body>

关于em的数值可通过“ 10px ÷ 16 = 0.525” 最终得出“0.625em”可被font-size所读取。

ID	DE	FA
color	文本颜色
family	设置字体	font
italic	斜体	font-style
size	字体大小

align	文本格式( center = 居中, right = 居右, left = 居左)	text
indent	缩进
overline	顶部横线	text-decoration
line-through	删除字
underline	下划线
		text-transform
uppercase	全部大写
lowercase	全部小写
capitalize	首字母大写

⬅️ Go back